<template>
  <div>
    <h1>App</h1>
    <p>count:{{ count }}</p>
    <p>doubleCount:{{ abc }}</p>

    <button @click="increment">累加count</button>
    <button @click="incrementN({n:10})">累加N count</button>
    <button @click="decrement">累减count</button>
    <button @click="incrementWait">等一等累加count</button>
    <button @click="incrementNWait(5)">等一等累加Ncount</button>

  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
/* import store from "./stores";
console.log(store); */
export default {
  name: "App",
  mounted(){
    console.log(this,"app");
  },
  /* 
    辅助函数的参数除了数组以外,还可以是一个对象
    因为如果用数组的话,生成的函数名或者计算属性等名称和vuex的值的名称一致
    有的时候,为了防止命名冲突,我们可以选择使用对象写法,对象的key就是在组件中的命名,对象value就是在vuex中的命名
  */
  computed:{
    ...mapState(["count","num"]),

    ...mapGetters({abc : "doubleCount"})
  },
  methods: {
    ...mapMutations({
      increment:"increment",
      decrement:"decrement",
      incrementN:"incrementN"
      }),
    ...mapActions(["incrementWait","incrementNWait"])
  },
 
  
}
</script>

<style></style>